<template>
  <div >
    <el-card>
      <template #header>
              <div class="card-header">
                <span>菜单</span>
              </div>
            </template>
    <el-tree 
    style="max-width: 200px;"
    :data="menuList"
    show-checkbox
    node-key="id"
    default-expand-all
    :props="props"
    @check-change="handleCheckChange"
  />
  </el-card>
  </div>

</template>


<script setup>
import { ref, onMounted,computed ,reactive } from 'vue'

const props = {
  label: 'name',
}


function handleCheckChange(data,checked,indeterminate){
  console.log(checked)
  console.log(JSON.stringify(data))
}

const menuList = reactive([


    {
    id: "1",
    icon: "HomeFilled",
    name: "首页",
    path: "home",
    fullPath: "navigation/home",
    active: "1",
  },
 
  {
    id: "20",
    icon: "Position",
    name: "位置管理",
    path: "position",
    fullPath: "navigation/position",
    active: "0",
  },
  {
    id: "30",
    icon: "Operation",
    name: "监测设备管理",
    path: "device",
    fullPath: "navigation/device",
    active: "0",
  },

  {
    id: "50",
    icon: "user",
    name: "我的信息",
    path: "myInfo",
    fullPath: "navigation/myInfo",
    active: "0",
  },

  {
    id: "2",
    icon: "Tools",
    name: "设置",
    path: "setting",
    fullPath: "",
    active: "0",
    children: [
      {
        id: "3",
        icon: "User",
        name: "用户管理",
        path: "user",
        fullPath: "navigation/user",
        active: "0",
      },
      {
        id: "4",
        icon: "Avatar",
        name: "角色管理",
        path: "role",
        fullPath: "navigation/role",
        active: "0",
      },
      {
        id: "5",
        icon: "Menu",
        name: "菜单管理",
        path: "menu",
        fullPath: "navigation/menu",
        active: "0",
      },
      
    ],
  },
  {
    id: "100",
    icon: "Management",
    name: "异常处理",
    path: "management",
    fullPath: "",
    active: "0",
  },
  {
    id: "200",
    icon: "List",
    name: "异常查询",
    path: "List",
    fullPath: "",
    active: "0",
  }
]);

// 生命周期钩子
onMounted(() => {
})



</script>

<style>

</style>
